<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Import contacts - Magneto, by Protoweb</title>

  {include file="head-common.html"}

  <script src="{views_url}js/lib/jquery.iframe-post-form.js"></script>
  <script>
    var timer_status;

    jQuery(function () {
      jQuery('#import_form').iframePostForm ({
        json : true,
        post : function () {
          if (! jQuery('input[type=file]').val().length) {
            error_no_files();
            return false;
          }

          uploading();
        },
        complete : function (response) {
          if (response.success) {
            crunching();
          }

          else {
            error_uploading();
          }
        }
      });
    });

    function error_no_files() {
      jQuery("#import_form").show();
      jQuery(".progress").hide();
      jQuery("#import_status").hide();

      jQuery("#no_file_selected").fadeIn();
    }

    function uploading() {
      jQuery("#import_form").hide();
      jQuery("#import_error").hide();
      jQuery(".progress").show();
      jQuery("#no_file_selected").hide();
      jQuery("#import_status").html("Subiendo archivo de contactos, según su tamaño esta operación podría requerir algunos minutos");
      jQuery("#import_status").show();
    }

    function error_uploading() {
      jQuery("#import_error").fadeIn();
      jQuery("#import_form").show();
      jQuery(".progress").hide();
      jQuery("#import_status").hide();
    }

    function crunching() {
      jQuery(".progress").removeClass("progress-warning");
      jQuery(".progress").addClass("progress-info");
      jQuery(".progress .bar").css("width", "1%");
      jQuery("#import_status").html("Preparando archivo de contactos para ser procesado");

      import_status();

      jQuery.get("{controllers_url}recipients/import_do/", 
        function(data) {
          jQuery("#import_success").fadeIn();
          
          if (data.invalid) 
            jQuery("#import_invalids").fadeIn();

          jQuery(".progress").fadeOut();
          jQuery("#import_status").fadeOut();

          clearTimeout(timer_status);

          jQuery(".import-total").html(data.total);
          jQuery(".import-existent").html(data.total - data.imported - data.invalid);
          jQuery(".import-invalid").html(data.invalid);
          jQuery(".import-processed").html(data.processed);
          jQuery(".import-imported").html(data.imported);
        }, "json"
      );
    }

    function import_status() {
      jQuery.get("{controllers_url}recipients/import_status/", 
        function(data) {
          if (data.percent) {
            jQuery(".progress .bar").css("width", data.percent + "%");
            jQuery("#import_status").html("<span class='import-processed'>0</span> de <span class='import-total'>0</span> contactos procesados");
            jQuery("#import_status").show();

            jQuery(".import-total").html(data.total);
            jQuery(".import-processed").html(data.processed);
          }
        }, "json"
      );

      timer_status = setTimeout("import_status()", 500);
    }
  </script> 

</head>

<body>

  {include file="header.html"}

  <div class="main container">

    <h1 class="over-bg antialias-white">Import contacts</h1>

    {include file="messages_managment.html"}

    <div class="row">

      <div class="span12">

        <h2>Mantiene tu lista actualizada en todo momento</h2>

        <section>

          <p>
            Es muy fácil importar contactos en Magneto, sólo debes subir un archivo en formato Excel (XLS), similar a este:
          </p>

          <table class="table table-striped table-bordered">
            <thead>
              </tr>
                <th>Email</th>
                <th>Apellido</th>
                <th>Nombre</th>
                <th>Atributos</th>
              </tr>
            </thead>
              
            <tbody>
              <tr>
                <td>duke.ellington@music.com</td>
                <td>Duke</td>
                <td>Ellington</td>
                <td>Music, Jazz, Man, United States</td>
              </tr>

              <tr>
                <td>arturo.sandoval@hotmail.com</td>
                <td>Arturo Sandoval</td>
                <td>Arturo Sandoval</td>
                <td>Music, Jazz, Man, Cuba</td>
              </tr>
              
              <tr>
                <td>ella.fitzgerald@gmail.com</td>
                <td>Ella</td>
                <td>Fitzgerald</td>
                <td>Music, Jazz, Woman, United States</td>
              </tr>
            </tbody>
          </table>

          <p><strong>Algunas consideraciones:</strong></p>
          <ul>
            <li>Todos los campos son opcionales, menos el email</li>
            <li>Si hay contactos repetidos, sólo se incluirá el primero</li>
            <li>Si un contacto ya se encuentra en tu base de datos, no será incluido nuevamente</li>
            <li>En caso de haber contactos inválidos (emails inválidos), los incluiremos en una lista para que puedas revisarlos y corregirlos</li>
          </ul>

        </section>
        <!-- help & tips -->

        <section>

          <form id="import_form" action="{controllers_url}recipients/import_ajaxupload/" enctype="multipart/form-data" method="post">
            <input class="input-file" type="file" name="userfile" id="userfile" />
            <button class="btn btn-primary" type="submit"><i class="icon-upload icon-white"></i> Subir archivo</button>
            <span id="no_file_selected" class="label label-important hide">Recuerda que debes seleccionar un archivo para subir</span>
          </form>

          <div class="progress progress-danger progress-striped active hide">
            <div class="bar" style="width: 100%;"></div>
          </div>

          <div id="import_status" class="hide">
          </div>

          <div id="import_error" class="alert alert-error hide">
            <strong>Hubo un error</strong>. 
            Recuerda que sólo pueden subirse archivos de Excel (XLS). <br /><br />
            Si estás subiendo el formato correcto y el error continúa, puedes ponerte en contacto con nosotros y te ayudaremos personalmente.
          </div>

          <div id="import_success" class="alert alert-success hide">
            <strong>Listo!</strong> Hemos terminado de importar tus contactos.  <br /><br />
            Se procesaron <span class="import-total">0</span> registros, de los cuales 
            <span class="import-existent">0</span> ya estaban entre tus contactos o eran repetidos. <br />
            Hemos encontrado <span class="import-invalid">0</span> emails inválidos. <br />
            <strong><span class="import-imported">0</span> nuevos contactos han sido incorporados a tu base de datos</strong>.
          </div>

          <div id="import_invalids" class="hide">
            <a class="btn btn-danger" href="{controllers_url}recipients/invalids/xls/"><i class="icon-download icon-white"></i> Descargar los <span class="import-invalid">0</span> contactos inválidos</a> Podrás revisarlos y volver a subirlos en cualquier momento.
          </div>

        </section>
        <!-- importing -->

      </div>
    </div>
    <!-- principal row -->

  </div>
  <!-- main container -->

  {include file="footer.html"}

</body>
</html>